<template>
	<view>
		<view class="search" >
			<!-- <view class="search_input">
				<u-icon name="search" size="24"></u-icon>
				<input type="text" placeholder="请输入搜索关键词" v-model="keyword" />
			</view>
			<text @click="onSearch">搜索</text> -->
			<u-search bgColor="#fff;" @search="onSearch" placeholder="请输入商品名称" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="content">
			<view class="title" v-if="searchHistory.length">
				<text>搜索历史</text>
				<u-icon name="trash" size="24" @click="clearHistory"></u-icon>
			</view>
			<view class="keyword_list">
				<view v-for="(item, index) in searchHistory" :key="index" @click="searchKeyword(item)">{{ item }}</view>
			</view>
			<view class="title">
				<text>热门搜索</text>
				<u-icon name="reload" size="24" @click="getSearchKeyword"></u-icon>
			</view>
			<view class="keyword_list">
				<view v-for="(item, index) in searchKeywordList" :key="index">{{ item.searchName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSearchKeyword } from '@/api/goodsType.js';
export default {
	data() {
		return {
			keyword: '',
			goodsList: [],
			searchHistory: [],
			searchKeywordList: []
		};
	},
	created() {
		this.searchHistory = uni.getStorageSync('searchHistory');
		this.searchHistory = this.searchHistory ? this.searchHistory : new Array();
	},
	mounted() {
		this.getSearchKeyword();
	},
	methods: {
		getSearchKeyword() {
			getSearchKeyword().then(res => {
				this.searchKeywordList = res;
			});
		},
		searchKeyword(e){
			this.keyword = e;
			this.onSearch()
		},
		onSearch() {
			if (!this.keyword) {
				uni.showToast({
					title: '请输入关键词'
				});
				return false;
			}
			if (this.searchHistory.indexOf(this.keyword) == -1) {
				this.searchHistory.unshift(this.keyword);
				uni.setStorageSync('searchHistory', this.searchHistory);
			}

			uni.navigateTo({
				url: '/pages/index/search?keyWord=' + this.keyword
			});
			// getGoodsByKeyword({keyword:this.keyWord}).then(res=>{
			// 	this.goodsList = res;
			// })
		},
		clearHistory() {
			this.searchHistory = new Array();
			uni.setStorageSync('searchHistory', this.searchHistory);
		}
	}
};
</script>

<style>
.keyword_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 30rpx auto;
	font-size: 28rpx;
}

.keyword_list > view {
	padding: 6rpx 20rpx;
	background-color: #efefef;
	border-radius: 30rpx;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
}

.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 30rpx;
}

.content {
	width: 100%;
	height: calc(100vh - 120rpx);
	background-color: #fff;
	padding: 20rpx;
}

page {
	min-height: 100vh;
	background-color: #efefef;
}

.search {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 20rpx;
}

.search_input {
	width: 600rpx;
	background-color: #fff;
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	margin-right: 10rpx;
	height: 60rpx;
}
</style>
